<template>
    <div class="profile-nav-bg" :style="bgStyle()"></div>
     <!-- User Profile Card -->
     <a-card :bordered="false" class="card-profile-head" :bodyStyle="{ padding: 0, }">
         <template #title>
             <a-row type="flex" align="middle">
                 <a-col :span="24" :md="12" class="col-info">
                     <a-avatar :size="74" shape="square" :src="avatar" />
                     <div class="avatar-info">
                         <h4 class="font-semibold m-0"> {{ name }}</h4>
                         <p>{{ intro }}</p>
                     </div>
                 </a-col>
                 <a-col :span="24" :md="12" style="display: flex; align-items: center; justify-content: flex-end">
                     <!--right slot 右侧覆写插槽-->
                     <slot>
                         <a-radio-group v-model:value="activeVal" size="small" @change="activeChange">
                             <a-radio-button v-for="item in radioList" :value="item">{{ item }}</a-radio-button>
                         </a-radio-group>
                     </slot>
                 </a-col>
             </a-row>
         </template>
     </a-card>
 </template>
 
 <script setup>

 const emit = defineEmits(['confirm'])
 const props = defineProps({
     bgUrl:{
         type:String,
         default:'images/bg-profile.jpg'
     },
     bgTop:{
         type:Number,
         default:0
     },
     // 用户头像
     avatar: {
         type: String,
         default: 'images/face-1.jpg'
     },
     name: {
         type: String,
         default: 'Sarah Jacob'
     },
     intro: {
         type: String,
         default: 'CEO / Co-Founder'
     },
     radioList:{
        type:Array,
        default:['总览','项目']
     }
 })
 // Active button for the "User Profile" card's radio button group.
 const activeVal = ref('总览')
 function bgStyle(){
     let style = "background-image:url(" + props.bgUrl + "); margin-top:" + props.bgTop + "px;";
     return style;
 }
 function activeChange(e){
    //console.log(e)
    emit('confirm',e.target.value)
 }
 </script>
 <style lang="scss" scoped>
 @import '@/scss/muse.scss';
 </style>